<template>
  <div class="home">
    <div class="home-header wid">
      <div>
        <img src="../assets/images/addres.png" alt="" srcset="">
        <span>上海市</span>
      </div>
      <div class="search-box">
        <input type="text" placeholder="理财/缴费/投资" v-model="searcText">
        <div class="search" @click="search">
        </div>
      </div>
      <div>
        <img src="../assets/images/sao.png" alt="" srcset="">
        <span>扫一扫</span>
      </div>
    </div>
    <!-- banner -->
        <div class="banner-box wid">
            <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) in banner" :key="index">
              <img :src="item.imgurl" alt="" srcset="">
            </swiper-slide>
       
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <!-- 首页图标 -->
        <div class="index-icon">
          <ul class="icon-box wid">
              <li v-for="(item,index) in indexIcon" :key="index" @click="iconclick(item.text)">
                <img :src="item.imgurl" alt="" srcset="">
                <p>{{ item.text }}</p>
              </li>
          </ul>
        </div>
        <!-- 广告图 -->
        <div class="wid img-box index-ban">
          <img src="../assets/images/index-ban.jpg" alt="" srcset="">
        </div>
        <!-- 小版块 -->
        <div class="smallSection wid clearfix">
          <div class="fl">
            <div class="img-box">
              <img src="../assets/images/index-image2.jpg" alt="" srcset="">
            </div>
              <div class="img-box">
              <img src="../assets/images/index-image3.jpg" alt="" srcset="">
            </div>
          </div>
          <div class="fr">
            <div class="img-box">
              <img src="../assets/images/index-image1.jpg" alt="" srcset="">
            </div>
          </div>
        </div>
        <!-- 新闻版块 -->
        <div class="wid index-new clearfix">
          <div class="fl">
            <h1>18</h1>
            <p>三月</p>
          </div>
          <div class="fr">
            <p>春季上新，女神季满减优惠，全场3折起</p>
            <p>新用户有礼，填写完整个人信息，可领取奖品</p>
          </div>
        </div>
        <!-- 优惠券 -->
        <div class="index-discount wid">
          <h1 class="index-tit">每日优惠</h1>
          <ul class="list-box" >
            <li v-for="(item,index) in discount" :key="index" :style="`background-image:url('./${item.imgUrl}');`" @click="iconclick(item.title)">
              <p>{{ item.title }}</p>
              <span>{{ item.dec }}</span>
            </li>
          </ul>
        </div>
        <!-- 猜你喜欢 -->
        <div class="wid index-like wid">
          <h1 class="index-tit">猜你喜欢</h1>
          <ul class="list-box">
            <li class="clearfix" v-for="(item,index) in like" :key="index" @click="iconclick(item.title)">
              <div class="fl">
                <p>{{ item.tit }}</p>
                <span>{{ item.text }}</span>
              </div>
              <div class="fr">
                <p>{{ item.title }}</p>
                <span>{{ item.dec }}</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 最新推荐 -->
        <div class="index-hot wid">
          <h1 class="index-tit">最新活动</h1>
          <ul class="how-icon">
            <li v-for="(item,index) in Hot" :key="index"  @click="iconclick(item.title)">
              <img :src="item.imgUrl" alt="" srcset="">
              <p>{{ item.title }}</p>
            </li>
          </ul>
            <div class="img-box">
              <img src="../assets/images/jiang.png" alt="" srcset="">
            </div>
            <!-- 新手 -->
             <ul class="newbie">
              <li v-for="(item,index) in newbie" :key="index">
                <p class="header">{{item.tit}}<span>{{item.dec}}</span></p>
                <div class="list-box">
                  <div v-for="(i,index) in item.money" :key="index">
                    <p>{{ i.num }}</p>
                    <span>{{ i.text }}</span>
                  </div>
                </div>
                <div class="progress">
                  <i class="bg" :style="`width:${(item.money[1].num*1 -  item.money[0].num*1) / 10}%`"></i>
                </div>
                <div class="footer">
                   <p>剩余金额{{  item.money[1].num*1 -  item.money[0].num*1}}万</p>
                  <p>{{(item.money[1].num*1 -  item.money[0].num*1) / 10}}%</p> 
                </div>
              </li>
            </ul> 
        </div>
        <!-- 首页用户中心 -->
        <div class="index-user wid">
          <h1 class="index-tit">快捷导航</h1>
          <ul class="user-list">
            <li v-for="(item,index) in IndexUser" :key="index" @click="iconclick(item.title)">
              <img :src="item.imgUrl" alt="" srcset="">
              <p>{{item.title}}</p>
            </li>
          </ul>
        <div class="img-box userbanner">
          <img src="../assets/images/index-userbanner.jpg" alt="" srcset="">
        </div>

        </div>
        <!-- 极速办卡 -->
        <div class="index-card">
            <ul class="card-box">
              <li v-for="(item,index) in Card" :key="index">
                <div class="wid container">
                <div class="img-box">
                  <img :src="item.imgUrl" alt="" srcset="">
                </div>
                <div class="text"> 
                  <p>{{ item.title }}</p>
                  <span>{{ item.dec }}</span>
                </div>
                <div>
                  <button @click="iconclick(item.title)">查看</button>
                </div>
                </div>
              </li>
            </ul>
        </div>
        <!-- 新闻版块 -->
        <div class="idnex-new ">
          <h1 class="index-tit wid">金融百科</h1>
          <ul class="new-list wid">
              <li v-for="(item,index) in IndexNews" :key="index">
                <div class="text-box">
                  <h2>{{ item.title }}</h2>
                  <span class="time">{{ item.time }}</span>
                  <div class="footer">
                    <span>
                      <i class="iconfont icon-tuijian" style="font-size:18px"></i>
                      {{ item.text }}  
                    </span>
                    <span> <i class="iconfont icon-zixun1"></i>
                      {{ item.hot }}  </span>
                  </div>
                </div>
                <div class="img-box">
                  <img :src="item.imgUrl" alt="" srcset="">
                </div>
              </li>
          </ul>
        </div>

  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'home',
  data(){
    return {
      searcText:'',
       swiperOption: {
          spaceBetween: 5,
          centeredSlides: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        banner:'',
        indexIcon:'',
        discount:'',
        like:'',
        Hot:'',
        newbie:'',
        Card:'',
        IndexNews:'',
        IndexUser:''
    }
  },
  computed:{
    // 计算属性
  },  
  created(){
    this.getData()
  },
  mounted(){
  },
  methods: {
    getData(){
      this.$axios({
      url:'api/mydata/home.json',
      method:'get'
    }).then( res => {
      let mydata = res.data.mydata
      this.banner = mydata.banner
      this.indexIcon = mydata.indexIcon
      this.discount = mydata.discount
      this.like = mydata.like
      this.Hot = mydata.Hot
      this.newbie = mydata.newbie
      this.Card = mydata.Card
      this.IndexNews = mydata.IndexNews
      this.IndexUser = mydata.IndexUser
    })
    },
    search(){
      Toast(`搜索${this.searcText}`)
    },
    iconclick(text){
      Toast(text)
    }
  },
  components: {
  }
}
</script>
